布局 · Bootstrap v5.3

使用我们的表单布局选项为您的表单提供一些结构——从内联到水平到自定义网格实现。

每组表单字段都应该位于一个元素中。Bootstrap 没有为元素提供默认样式，但是默认提供了一些强大的浏览器功能。

由于 Bootstrap 使用display: block和width: 100%适用于我们几乎所有的表单控件，因此默认情况下表单将垂直堆叠。可以使用其他类在每个表单的基础上改变此布局。

边距实用程序是向表单添加某些结构的最简单方法。它们提供标签、控件、可选表单文本和表单验证消息的基本分组。我们建议坚持使用margin-bottom实用程序，并在整个表单中使用单一方向以保持一致性。

使用、或几乎任何其他元素，随意构建您喜欢的表单。

可以使用我们的网格类构建更复杂的表单。将这些用于需要多列、不同宽度和其他对齐选项的表单布局。需要启用 Sass $enable-grid-classes变量（默认启用）。

通过添加列间距，您可以控制列间距的宽度以及内联和块的方向。还需要启用 Sass $enable-grid-classes变量（默认情况下启用）。

还可以使用网格系统创建更复杂的布局。

通过将.row类添加到表单组并使用.col-*-*类来指定标签和控件的宽度，使用网格创建水平表单。请务必也添加.col-form-label到您的中，以便它们与关联的表单控件垂直居中。

有时，您可能需要使用边距或填充实用程序来创建您需要的完美对齐。例如，我们删除了堆叠式单选框输入标签上的padding-top以更好地对齐文本基线。

请务必使用.col-form-label-sm或.col-form-label-lg到您的或以正确遵循.form-control-lg和.form-control-sm的大小。

如前面的示例所示，我们的网格系统允许您在.col中放置任意数量的.row。他们将在它们之间平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间，而其余的.col平均分配其余部分，具有特定的列类，例如.col-sm-7.

下面的示例使用 flexbox 实用程序将内容垂直居中，.col更改为.col-auto，以便您的列只占用所需的空间。换句话说，列的大小根据内容本身而定。

然后，您可以再次将其与特定于大小的列类重新混合。

使用这些.row-cols-*类来创建响应式水平布局。通过添加列间距，我们将在水平和垂直方向上拥有间距。在狭窄的移动视口上，.col-12有助于堆叠表单控件等。.align-items-center将表单元素对齐到中间，使.form-check对齐正确。